import { Button, Col, Form, FormInstance, Input, Row, Select } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useState } from 'react';
const { Option } = Select;

interface SearchProps {
  form: FormInstance;
  reset: () => void;
  submit: () => void;
}

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

export default function Search(props: SearchProps) {
  const { form, reset, submit } = props;
  const [collapsed, setCollapsed] = useState<boolean>(false);

  function handleCollapsed() {
    setCollapsed(!collapsed);
  }

  return (
    <Form form={form}>
      <Row gutter={16} style={{ width: '100%' }}>
        <Col span={8}>
          <Form.Item name="email" label="email" {...layout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name="gender" label="性别" {...layout}>
            <Select allowClear>
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={8} hidden={collapsed}>
          <Form.Item name="phone" label="电话" {...layout}>
            <Input />
          </Form.Item>
        </Col>
        <Col span={8} hidden={collapsed}>
          <Form.Item name="nat" label="nat" {...layout}>
            <Input />
          </Form.Item>
        </Col>
        <Col style={{ display: 'flex', flex: 1, justifyContent: 'flex-end' }}>
          <div>
            <Button type="primary" style={{ marginRight: 12 }} onClick={submit}>
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
            <Button type="link" onClick={handleCollapsed}>
              {collapsed ? (
                <>
                  展开 <DownOutlined />
                </>
              ) : (
                <>
                  收起 <UpOutlined />
                </>
              )}
            </Button>
          </div>
        </Col>
      </Row>
    </Form>
  );
}
